<div class="details-expanded">
    <div>
        <div class="title">
            Syntax Score:
        </div>
        <div class="score">
            {{ syntaxScore }}
        </div>

        <div>Warnings: {{ contentWarn.count }}</div>
        <ul>
            <li *ngFor="let rule of contentWarn.rulesViolated">

                <div *ngFor="let message of contentWarn.ruleDetails[rule].message; let first = first;">

                    <div class="not-message" [ngClass]='{"hidden-text": !first}'>
                        <span class="{{contentWarn.ruleDetails[rule].severityIcon}}"
                            tooltip="{{contentWarn.ruleDetails[rule].severityText}}"></span>
                        <div class="violation-count">{{ contentWarn.ruleDetails[rule].violationsCount }}</div>
                        <span class="rule-id">{{ rule }}:</span>
                    </div>
                    {{ message }}
                </div>
            </li>
        </ul>

    </div>
    <br>

    <div>
        <div class="title">
            Metadata Score:
        </div>
        <div class="score">
            {{ metadataScore }}
        </div>

        <div>Warnings: {{ metaWarn.count }}</div>
        <ul>
            <li *ngFor="let rule of metaWarn.rulesViolated">

                <div *ngFor="let message of metaWarn.ruleDetails[rule].message; let first = first;">

                    <div class="not-message" [ngClass]='{"hidden-text": !first}'>
                        <span class="{{metaWarn.ruleDetails[rule].severityIcon}}"
                            tooltip="{{metaWarn.ruleDetails[rule].severityText}}"></span>
                        <div class="violation-count">{{ metaWarn.ruleDetails[rule].violationsCount }}</div>
                        <span class="rule-id">{{ rule }}:</span>
                    </div>
                    {{ message }}
                </div>

            </li>
        </ul>

    </div>
    <br>

</div>
